<template>
    <div class="add">
        <div class="topbar2">
            <p>粥品香坊(大运村)</p>
            <app-stars :score="scorec" size="48" :mr="5"></app-stars>
        </div>
        <div class="contentBar">
            <div class="contentTopBar">
                <i class="left"></i>
                <p>优惠信息</p>
                <i class="right"></i>
            </div>
            <ul>
                <li v-for="(sup,index) in supports" :key="index">
                    <img src="./img/decrease_2@2x.png" alt="">
                    <span>{{sup.content}}</span>
                </li>
            </ul>
        </div>
        <div class="footerBar">
            <div class="contentTopBar">
                <i class="left"></i>
                <p>商家公告</p>
                <i class="right"></i>
            </div>
            <p>
                粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师
                屈浩先生领衔研发。坚守纯天然、0添加的良心品质深的消费者青睐，发展至今成为粥
                类引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。
            </p>
        </div>
        <div class="clear" @click="cancel">X</div>
    </div>
</template>

<script>
import stars from "../components/stars/stars"
export default {
    name:"message",
    props:['supports',"scorec"],
    methods:{
        cancel(){
            this.$emit('update:show',false);
        }
    },
    components:{
        "app-stars":stars
    }
}
</script>

<style lang="less" scope>
.add{
    position: relative;
    background-color:rgba(7, 17, 27, 0.8);
    padding: 0rem 0.72rem 0.64rem;
    height: 100%;
    .topbar2{
        text-align:center;
        p{
            margin-top: 1.28rem;
            font-size: 0.32rem;
            font-weight: 700;
            color:rgb(255,255,255);
            line-height: 0.32rem;
        }
        .stars{
            margin: 0.32rem 0 0.56rem;
            div{
                height:0.48rem;
                margin:0 0.15rem;
            }
        }
    }
    .contentBar{
        .contentTopBar{
            display:flex;
            justify-content:center;
            align-items:center;
            .left {
                width: 2.24rem;
                color: rgba(255, 255,255, 0.2);
                border: 0.01rem solid;
            }
            p{
                font-size: 0.26rem;
                font-weight: 700;
                color:rgb(255,255,255);
                line-height: 0.32rem;
                margin: 0 0.24rem;
            }
            .right{
                width: 2.24rem;
                color: rgba(255, 255,255, 0.2);
                border: 0.01rem solid;
            }
        }
        ul{
            margin: 0.48rem 0 0.32rem;
            li{
                display: flex;
                align-items:center;
                font-size: 0.24rem;
                font-weight: 200;
                color:rgb(255,255,255);
                line-height: 0.24rem;
                margin: 0 0.24rem 0.24rem;
                img{
                    height: 0.32rem;
                    margin-right: 0.12rem;
                }
            }
        }
    }
    .footerBar{
        .contentTopBar{
            display:flex;
            justify-content:center;
            align-items:center;
            .left {
                width: 2.24rem;
                color: rgba(255, 255,255, 0.2);
                border: 0.01rem solid;
            }
            p{
                font-size: 0.26rem;
                font-weight: 700;
                color:rgb(255,255,255);
                line-height: 0.32rem;
                margin: 0 0.24rem;
            }
            .right{
                width: 2.24rem;
                color: rgba(255, 255,255, 0.2);
                border: 0.01rem solid;
            }
        }
        p{
            font-size: 0.24rem;
            font-weight: 200;
            color: rgb(255,255,255);
            line-height: 0.48rem;
            margin: 0.48rem 0.24rem;
        }
    }
    .clear{
        font-size: 0.64rem;
        color:rgb(255,255,255,0.5);
        text-align: center;
        font-size: 0.40rem;
        position:absolute;
        bottom:1.64rem;
        left:50%;
        right:50%;
    }
}

</style>